import { ConfigProvider } from "@taroify/core";
import { getTheme } from "@/config/theme";
import { createContext, useContext, useState } from "react";
import { THEME } from "@/types";

const CustomStyleContext = createContext<{ theme: THEME } | null>(null);

export function CustomTheme({ children }) {
  const initialTheme = getTheme("light");
  const [theme, setTheme] = useState(initialTheme);

  return (
    <CustomStyleContext.Provider value={{ theme }}>
      <ConfigProvider theme={theme}>
        <>{children}</>
      </ConfigProvider>
    </CustomStyleContext.Provider>
  );
}
export function useCustomTheme() {
  const context = useContext(CustomStyleContext);
  if (!context) {
    throw new Error(
      "useCustomTheme must be used within a CustomTheme provider"
    );
  }
  return context;
}
